<template>
	<view class="banner">
		<view class="banner-1">
			<view class="banner-img">
				<image src="../../../static/recovery/数码.jpg" class="imgs" />
				<view>手机数码</view>
			</view>
			<view class="banner-img">，
				<image src="../../../static/recovery/厨具.jpeg" class="imgs" />
				<view>电器厨具</view>
			</view>
			<view class="banner-img">
				<image src="../../../static/recovery/衣被.jpeg" class="imgs" />
				<view>衣裤被褥</view>
			</view>
			<view class="banner-img">
				<image src="../../../static/recovery/纸铁.jpg" class="imgs" />
				<view>纸塑废铁</view>
			</view>
		</view>
		<view class="banner-2">
			手机预约→免费上门→按量返现
		</view>
	</view>
	<view class="example">
		<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
			<uni-forms-item label="分类" required>
				<uni-data-select v-model="baseFormData.classification" :localdata="range"
					placeholder="请选择回收类型"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="标题" name="title" required>
				<uni-easyinput v-model="baseFormData.title" placeholder="请输入标题 例如(一床被子)" />
			</uni-forms-item>
			<uni-forms-item label="数量" name="num" required>
				<uni-easyinput v-model="baseFormData.num" placeholder="请输入数量 例如(2斤)" />
			</uni-forms-item>
			<uni-forms-item label="电话" name="phone" required>
				<uni-easyinput v-model="baseFormData.phone" placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item label="取货" name="pickup_time" required>
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.pickup_time" />
			</uni-forms-item>
			<uni-forms-item label="地址" name="address" required>
				<uni-easyinput v-model="baseFormData.address" placeholder="请输入地址 例如(3号楼 304宿舍)" />
			</uni-forms-item>
			<uni-forms-item label="图片" name="images" class="tu" required>
				<view class="example-body">
					<image v-for="(i,idx) in baseFormData.images" :key="idx" :src="i" class="imgs" />
					<view @click="uploads" class="bt" v-show="baseFormData.images.length<5">
						<image src="../../../static/img/图片.svg" class="btimg"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput type="textarea" v-model="baseFormData.desc" placeholder="请输入备注" />
			</uni-forms-item>
			<button type="primary" size="mini" @click="add">提交预约</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单验证
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入标题',
						}, {
							minLength: 3,
							maxLength: 10,
							errorMessage: '标题长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					num: {
						rules: [{
							required: true,
							errorMessage: '请输入数量',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入地址',
						}]
					},
					// imgNum: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请上传图片',
					// 	}, {
					// 		validateFunction: function(rule, value, data, callback) {
					// 			if (value.length < 2) {
					// 				callback('请至少上传两张图片')
					// 			}
					// 			return true
					// 		}
					// 	}]
					// },
				},
				// 表单信息
				baseFormData: {
					classification: '',
					title: '',
					num: '',
					desc: '',
					phone: '',
					address: '',
					images: [],
					pickup_time: Date.now(),
					state: '待评估'
				},
				// 分类数据
				range: [],
			}
		},
		created() {
			this.classIfy()
		},
		onLoad() {

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			// 添加回收物品
			add() {
				this.$refs.baseForm.validate().then(res => {
					uni.request({
						url: 'http://127.0.0.1:3366/zt/addRecovery',
						method: 'POST',
						data: this.baseFormData,
						success({
							data
						}) {
							uni.showToast({
								title: data.msg
							})
							uni.switchTab({
								url: '/pages/web/cp/Home',
							});
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 上传图片
			uploads(e) {
				let img = ""
				uni.chooseImage({
					count: 5, //默认最多5张
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'], //从相册选择
					success(res) {
						let uploadTask = uni.uploadFile({
							url: 'http://127.0.0.1:3366/imgs',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(uploadres) {
								img = uploadres.data
							}
						})
					}
				})
				setTimeout(() => {
					this.baseFormData.images.push(img)
				}, 5000)
			},
			// 分类列表
			classIfy() {
				uni.request({
					url: 'http://127.0.0.1:3366/zt/classIfy',
					success: ({
						data
					}) => {
						data.data.forEach((item) => {
							this.range.push({
								value: item._id,
								text: item.title
							})
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.banner {
		height: 200px;
		width: 100%;
		background-color: antiquewhite;
		background-image: url('../../../static/recovery/星空.jpg');
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.banner-1 {
		display: flex;
		justify-content: space-around;
	}

	.imgs {
		width: 80px;
		height: 50px;
		margin-top: 20px;
		border-radius: 3px;
	}

	.banner-img>uni-view {
		text-align: center;
		color: white;
		font-weight: 500;
	}

	.banner-2 {
		color: white;
		font-size: 22px;
		text-align: center;
		margin: 20px;
	}

	.example {
		padding: 10px;
		text-align: center;
	}

	.example-body {
		display: inline-flex;
		flex-wrap: wrap;
	}

	.bt {
		border: 3px dashed #72a5fd;
		border-radius: 8px;
		height: 95px;
		width: 95px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ebf1f8;
		margin: 7px 7px;
	}

	.btimg {
		width: 36px;
		height: 36px;
	}

	.tu {
		text-align: left;
	}
</style>